<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>拦截器interceptors</title>
    <link rel="stylesheet" href="../lib/bootstrap3/css/bootstrap.min.css">
    <link rel="stylesheet" href="../lib/bootstrap3/css/dashboard.css">
    <script src="../lib/angularjs/angular.min.js"></script>
    <style>body{margin:10px 80px;}</style>
</head>
<body >
<div class="panel panel-primary" ng-app="app01" ng-controller="ctrl01" id="app01">
    <div class="panel-heading">拦截器</div>
    <div class="panel-body">
        <p>
            <button class="btn btn-danger" ng-click="loading()">正确请求地址</button>
            <button class="btn btn-danger" ng-click="loading2()">错误请求地址</button>
        </p>
        <p>{{message}}</p>
    </div>
    <div class="panel-footer">
        任何时候如果我们想要为请求添加全局功能，例如身份验证、错误处理等，在请求发送给服务器之前或者从服务器返回时对其进行拦截，是比较好的实现手段。
    </div>
</div>
<div class="panel panel-primary" ng-app="app02" ng-controller="ctrl02" id="app02">
    <div class="panel-heading">$httpProvider</div>
    <div class="panel-body">
        <p>
            <button class="btn btn-danger" ng-click="loading()">正确请求地址</button>
            <button class="btn btn-danger" ng-click="loading2()">错误请求地址</button>
            <button class="btn btn-danger" ng-click="loading3()">手动设置头部</button>
            <button class="btn btn-danger" ng-click="loading4()">Post请求</button>
        </p>
        <p>{{message}}</p>
    </div>
    <div class="panel-footer">
        使用.config()可以向所有请求中添加特定的HTTP头，这非常有用，尤其是我们希望将身份验证的头同请求一同发送，或设置响应类型的时候。
    </div>
</div>
</body>
<script>
    var app=angular.module('app01', []);
</script>
<script>
    app.factory('myInterceptor', function($q) {
        var interceptor = {
            'request': function(config) {// 成功的请求方法
                alert('request');
                return config; // 或者 $q.when(config);
            },
            'response': function(response) {// 响应成功
                alert('response');
                return response; // 或者 $q.when(config);
            },
            'requestError': function(rejection) {// 请求发生了错误，如果能从错误中恢复，可以返回一个新的请求或promise
                alert('requestError');
                return response; // 或新的promise// 或者，可以通过返回一个rejection来阻止下一步// return $q.reject(rejection);
            },
            'responseError': function(rejection) {// 请求发生了错误，如果能从错误中恢复，可以返回一个新的响应或promise
                alert('responseError');
                return rejection; // 或新的promise// 或者，可以通过返回一个rejection来阻止下一步// return $q.reject(rejection);
            }
        };
        return interceptor;
    });
    app.config(function($httpProvider) {
            $httpProvider.interceptors.push('myInterceptor');
    });
    app.controller('ctrl01',function ($scope,$http) {
        $scope.message="未加载………………";
        $scope.loading=function () {
            $http.get('templeage-other.html').then(function (a) {
                $scope.message=a;
            });
        }
        $scope.loading2=function () {
            $http.get('templeage-other.html22222').then(function (a) {
                $scope.message=a;
            });
        }
    });
</script>
<script>
    var app02=angular.module('app02',[]);
    app02.config(function($httpProvider) {
        $httpProvider.defaults.headers.common['X-Requested-By'] = 'MyAngularApp';
    });
    /** 只对post（put）请求修改 **/
    app02.config(function($httpProvider) {
        $httpProvider.defaults.headers.post['X-Posted-By'] = 'MyAngularApp';
    });
    app02.controller('ctrl02',function ($scope,$http) {
        $scope.message="未加载………………";
        $scope.loading=function () {
            $http.get('templeage-other.html').then(function (a) {
                $scope.message=a;
            });
        }
        $scope.loading2=function () {
            $http.get('templeage-other.html22222').then(function (a) {
                $scope.message=a;
            },function (a) {
                $scope.message=a;
            });
        }
        $scope.loading3=function () {
            $http.defaults.headers.common['X-Auth'] = 'RandomString';
            $http.get('templeage-other.html').then(function (a) {
                $scope.message=a;
            });
        }
        $scope.loading4=function () {
            $http.post('templeage-other.html').then(function (a) {
                $scope.message=a;
            });
        }
    });
    angular.bootstrap(document.getElementById("app02"),['app02']);
</script>
</html>